<template>
    <div class="table">
        <div class="divSearch">
            <Row>
                <Col v-show="userinfo.AreaCode=='530000000000'">
                    <label class="searchLabel">所属地区:</label>
                    <!-- <Cascader :data="AreaList" change-on-select @on-change='SearchCascaderChange'  class="searchInput"></Cascader>-->
                    <Select v-model="searchModel.AreaCode"  placeholder="请选择..."  @on-change="getStatsData()" class="searchInput">
                        <Option :value="userinfo.AreaCode" v-if="userinfo.AreaCode=='530000000000'">全&nbsp;&nbsp;省</Option>
                        <Option :value="userinfo.AreaCode" v-else>全市/州</Option>
                        <Option :value="item.value" v-for="item in AreaList" :key="item.value">{{item.label}}</Option>
                    </Select>
                </Col>
                <Button style="margin: 9px" type="primary" @click="DataExport()"  class="searchButton" >导出</Button>
            </Row>
        </div>
        <Row>
            <!-- 列表-->
            <div >
                <Row>
                    <Col>
                        <table class="ContentTable">
                            <caption>
                                <div><span class="tableNum">{{searchModel.FillInYear}}
                                    <!-- {{userinfo.AreaCode|omgAreaName}} -->
                                    登录人员信息采集表</span>                                   <!-- <span class="tip">单位：无</span> -->
                                </div>
                            </caption>
                            <thead>
                                <tr>
                                    <th>地区</th>
                                    <th>姓名</th>
                                    <th>工作单位</th>
                                    <th>职务/职称</th>
                                    <th>办公室电话</th>
                                    <th>手机</th>
                                    <th>电子邮箱</th>
                                    <th>单位地址</th>
                                </tr>
                            </thead>
                            <tbody style="max-height: 530px;">
                                <tr v-for="item in datas.rows" :key="item.AreaCode" style="height:40px;">
                                    <td>{{item.AreaName}}</td>
                                    <td>{{item.UserName}}</td>
                                    <td>{{item.UnitName}}</td>
                                    <td>{{item.PostName}}</td>
                                    <td>{{item.Phone}}</td>
                                    <td>{{item.TelPhone}}</td>
                                    <td>{{item.Email}}</td>
                                    <td>{{item.UnitAddress}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </Col>
                </Row>
                <!-- <Row >
                    <Col span="24" class="dataTable">
                        <Page style="float:right;margin: 5px 20px 5px 0;" class="page-style" :total="datas.total" placement="top" @on-change="getPageNumber" :page-size="searchModel.PageSize" :page-size-opts='pageSizeOpts' show-sizer @on-page-size-change="getPageSize" show-total show-elevator></Page>
                    </Col>
                </Row> -->
            </div>
         </Row>
    </div>
</template>
<script>
import echarts from 'echarts';
import yunnan from 'echarts/map/js/province/yunnan.js';
// import kunming from 'echarts/map/js/city/kunming.js';
export default {
    data() {
        return {
            self: this,
            CreateYearList: this.GetGroupDict("ReportYear"), //年度
            CurrentYear: this.GetCurrentYear(),//当前年度
            AreaList: [],
            TotalData:[],
            CurrentAreaName:'',
            userinfo: this.GetlocaStorage("CSuserinfo"),//获取当前用户信息
            CheckButton:'mapShow',
            pageSizeOpts: [20, 40, 50],//默认分页最大设置
            pieLegendData:[],//饼图选择项
            datas:[],//列表数据
            pieData:[],
            geoCoordMapData:[],//当前市(州)、县(区)坐标信息
            StatsData:[],//地区-现有桑园面积
            SelectName:'',
            //列表头部
            TableHeader: [
                {
                    title: '地区',
                    key: 'AreaName'
                },
                {
                    title: '姓名',
                    key: 'UserName'
                },
                {
                    title: '工作单位',
                    key: 'UnitName'
                },
                {
                    title: '职务/职称',
                    key: 'PostName'
                },
                {
                    title: '办公室电话',
                    key: 'Phone'
                },
                {
                    title: '手机',
                    key: 'TelPhone'
                },
                {
                    title: '电子邮箱',
                    key: 'Email'
                },
                {
                    title: '单位地址',
                    key: 'UnitAddress'
                }
            ],
            //查询模型：根据需求删除不不要查询条件
            //蔬菜生产情况表代码
            searchModel: {
                Id: '',
                ReportCode: 'MulAnnualProducStatist',
                FillInYear: '',
                TimesType: '',
                AreaCode: this.GetlocaStorage("CSuserinfo").AreaCode,
                PageNumber: 1,
                PageSize: 20,
                Status: '',
                Opinion: ''
            },
            clientHeight: window.innerHeight - 250,//表格默认高度
            listShow:false,//列表显示控制器
            pieShow:false,//饼图显示控制器
            mapShow:false,//地图显示控制器
            total:100
        }
    },
    //高度计算
     mounted() {
        //table高度计算方法
        const that = this;
        window.onresize = () => {
            return (() => {
                that.clientHeight = window.innerHeight - 250;
            })()
        };
    },
    //方法
    methods: {
        //获取当前地区包含区(县)市(州)
        SearchAreaList() {
            var areaCode = this.userinfo.AreaCode;
            var areaList=[];
            if (areaCode != '530000000000' && areaCode != null) {
                var item = this.GetlocaStorage("areatreelist")[0];
                for (var i = 0; i < item.children.length; i++) {
                    if (item.children[i].value == areaCode) {
                        areaList.push(item.children[i]);
                    }
                }
            } else {

                areaList = this.GetlocaStorage("areatreelist");
            }
            this.AreaList=areaList[0].children;
        },  
        //获取当前页码
        getPageNumber(pageIndex) {
            this.searchModel.PageNumber = pageIndex;
            this.getStatsData();
        },
        //获取当前分页大小
        getPageSize(pageSize) {
            this.searchModel.PageSize = pageSize;
            this.getStatsData();
        },
        //获取地区统计数据
        getStatsData(){
            var self = this;
            var user = self.GetlocaStorage("CSuserinfo");
            self.searchModel.AreaCode = this.searchModel.AreaCode;
            if (self.searchModel.FillInYear != null && self.searchModel.FillInYear != '') {
                self.searchModel.FillInYear = self.searchModel.FillInYear;//获取当前系统年份
            } 
            else {
                self.searchModel.FillInYear = self.CurrentYear + '年'; //获取填报年度-----数据字典值
            }
            self.$http.post('User/PostStatsList', self.searchModel).then(function (res) {
                if (res.data.status === 1) {
                    self.datas=res.data;//列表赋值
                }
                else {
                    self.$Modal.error({
                    title: '提示信息',
                    content: res.data.message
                    });
                }
            });
        },
        GetData(obj){
            this.getStatsData(obj);
        },
        DataExport(){
            //导出
           var self = this;
            var user = self.GetlocaStorage("CSuserinfo");
            if (self.searchModel.FillInYear != null && self.searchModel.FillInYear != '') {
                self.searchModel.FillInYear = self.searchModel.FillInYear;//获取当前系统年份
            } 
            else {
                self.searchModel.FillInYear = self.CurrentYear + '年'; //获取填报年度-----数据字典值
            }
            window.open(this.$http.defaults.baseURL + "User/GetStatsExcelData?FillInYear=" + self.searchModel.FillInYear+"&&AreaCode=" + self.searchModel.AreaCode+"&&Status=" + self.searchModel.Status);
        },
    },
    //创建Vue页面方法
    created: function () { 
        this.SearchAreaList();//获取地区统计数据
        this.getStatsData();
        // this.GetData({label:'现有桑园',value:'1'});
        // this.getStatsData({label:'现有桑园',value:'1'});   //获取地区统计数据      
    },
    watch: {
        //需要监听的在此处新增监听对象
    }
}
</script>
<style scoped src="../../styles/stats.css"></style>
